<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>增加页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" class="minWidth">
        <el-form :model="form" ref="contract" inline-message="true" style="width: 100%">
            <el-card style="background-color: white; margin-bottom: 20px;">
                <div class="table_titel">
                    <div class="titel">增加方案</div>
                </div>
                <el-descriptions :column="2" border size="small">
                    <el-descriptions-item label="方案名称">
                        <el-form-item prop="Page_Group_Name">
                            <el-input v-model.trim="form.Page_Group_Name" placeholder="请输入方案名称"></el-input>
                        </el-form-item>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <el-row :gutter="20" style="margin-bottom: 100px;">
                <el-col :span="12">
                    <el-card style="background-color: white;">
                        <div class="table_titel">
                            <div class="titel">配置页面结构</div>
                            <div class="operation">
                                <el-button type="primary" @click="add_page_type" size="small">新增</el-button>
                                <el-button type="danger" @click="remove_page_type" size="small">删除</el-button>
                            </div>
                        </div>
                        <div id="page_type">
                            <el-descriptions :column="2" style="margin-bottom: 5px;position: relative;" v-for="(item,index) in form.Children.page_type" :key="index" border size="small">
                                <el-descriptions-item label="页面类型名称">
                                    <el-form-item prop="Page_Type_Name">
                                        <el-input v-model.trim="item.Page_Type_Name" placeholder="请输入页面类型名称"></el-input>
                                    </el-form-item>
                                    <i style="position: absolute; left: 0;top: 0;" class="el-icon-rank"></i>
                                </el-descriptions-item>
                                <el-descriptions-item label="页面路径">
                                    <el-form-item prop="Page_Group_SerialNumber">
                                        <el-input v-model.trim="item.Path" placeholder="请输入页面路径"></el-input>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="父级页面路径">
                                    <el-form-item prop="Page_Group_SerialNumber">
                                        <el-select style="width: 100%;" placeholder="请选择方案" clearable
                                            filterable v-model.trim="item.Parent_Page_SerialNumber">
                                            <el-option v-for="item in form.Children.page_type.filter((i,id)=>id != index)" :key="item.Page_Type_SerialNumber"
                                                :label="item.Page_Type_Name?item.Page_Type_Name:' '" :value="item.Page_Type_SerialNumber"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card style="background-color: white;">
                        <div class="table_titel">
                            <div class="titel">结构预览</div>
                        </div>
                        <el-tree :expand-on-click-node="false" default-expand-all node-key="Page_Type_SerialNumber"
                             :data="treeData">
                            <template v-slot="{data}">
                                <span>{{data.Page_Type_Name}}</span>
                            </template>
                        </el-tree>
                    </el-card>
                </el-col>
            </el-row>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm('contract')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script type="text/javascript" src="../../../utils/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/Sortable.min.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="js/AddGroup.js"></script>
</body>

</html>